/**
* 图表界面
*/
<template>
  <div>
    <h1>首页图标展示</h1>
  </div>
</template>
<script type="text/ecmascript-6">
import Chart from 'echarts';
import {getLast12Months,getTwoChart,getThreeChart,getFiveChart,getFourChart} from "../api";
export default {
  name: "welcome",
  data() {
    return {
      machineNo: '',
      type: 'day',
      //  近12个月全校体温异常人数情况
      SCEoption: {
        title:{
          left:'center',
          text:'近12个月全校身体异常人数情况',
          textStyle:{
            fontSize: 12
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}月 : {c}"
        },
        legend: {
          data: [{
            name: '体温异常人数',
            icon: 'rect'
          }],
          top: 1,
          left: 1,
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 10,
            color: "#323232"
          }
        },
        grid: {
          left: 50,
          right: 10,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          type: 'category',
          data: [],
          // data: this.lastMonth,
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            rotate: 20,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        series: [{
          name: '体温异常人数',
          type: 'bar',
          barGap: 0,
          data: [200, 278, 90, 145, 500, 390, 70, 60, 53, 77, 89, 79],
          // data:[],
          barWidth: 10,
          itemStyle: {
            normal: {
              color: new Chart.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#83bff6' },
                  { offset: 0.5, color: '#188df0' },
                  { offset: 1, color: '#188df0' }
                ]
              )
            },
            emphasis: {
              color: new Chart.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#2378f7' },
                  { offset: 0.7, color: '#2378f7' },
                  { offset: 1, color: '#83bff6' }
                ]
              )
            }
          }
        }]
      },
      //  销售总金额
      SUMoption: {
        title:{
          left:'center',
          text:'近12个月非绿码人数情况',
          textStyle:{
            fontSize: 12
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}月 : {c}"
        },
        legend: {
          data: [{
            name: '非绿码总人数',
            icon: 'rect'
          }],
          top: 1,
          left: 1,
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 10,
            color: "#323232"
          }
        },
        grid: {
          left: 50,
          right: 10,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            rotate: 20,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        series: [{
          name: '非绿码总人数',
          //   type: 'bar',
          type: 'line',
          barGap: 0,
          data: [50, 70, 81, 21, 60, 30, 20, 53, 64, 43, 23, 67],
          barWidth: 10,
          itemStyle: {
            color: "#e22424"
          }
        }]
      },
      //  总点击量
      Clickoption: {
        title:{
          text:'近12个月隔离人数情况',
          left: 'center',
          textStyle: {
            fontSize: 12
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}月 : {c}"
        },
        // toolbox: {
        //   feature: {
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ['line', 'bar'] },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        legend: {
          data: [{
            name: '总隔离人数',
            icon: 'rect'
          }],
          top: 1,
          left: 1,
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 10,
            color: "#323232"
          }
        },
        grid: {
          left: 50,
          right: 10,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            rotate:20,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,

            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        series: [{
          name: '总隔离人数',
          type: 'bar',
          barGap: 0,
          data: [6, 8, 10, 23, 56, 78, 98, 7, 45, 41, 32, 67],
          barWidth: 10,
          itemStyle: {
            color: "#f4cb14"
          }
        },
          {
            name: '总隔离人数',
            type: 'line',
            barGap: 0,
            data: [6, 8, 10, 23, 56, 78, 98, 7, 45, 41, 32, 67],
            barWidth: 10,
            itemStyle: {
              color: "#2ef414"
            }
          },
        ]
      },
      //  支付方式统计
      payoption: {
        title: {
          text: '隔离人员类别分布统计',
          left: 10,
          top: 5,
          textStyle: {
            fontSize:18,
            color: '#0a0909'
          }
        },
        legend:{
          top: '5%',
          left: 'right',
          orient:'vertical'
        },
        tooltip:{
          trigger:'item'
        },
        color:['red','green',"yellow"],
        series: [
          {
            name: '隔离人员类别统计情况',
            type: 'pie',
            radius: "80%",
            labelLine:{
              normal:{
                length:20,   	// 指示线长度
                lineStyle: {
                  color: "#595959"  // 指示线颜色
                }
              },
            },
            label: {
              normal: {
                textStyle: {
                  color: '#595959',	// 提示文字颜色
                  fontSize: 18		// 提示文字大小
                }
              }
            },
            data: [
            ],
            emphasis: {
              itemStyle:{
                shadowBlur: 10,
                shadowOffsetX:0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
          }
        ]
      },
      payNumoption:
        {
          title: {
            text: '最近一周全校成员健康码变化情况',
            left: 'center'

          },
          tooltip: {
            trigger: 'item',
          },
          legend: {
            data: [{
              name: '红码',
              icon: 'rect'
            },{
              name: '绿码',
              icon: 'rect'
            },{
              name: '黄码',
              icon: 'rect'
            }],
            top: 1,
            left: 1,
            itemGap: 10,
            itemWidth: 12,
            itemHeight: 12,
            textStyle: {
              fontSize: 12,
              color: "#323232"
            }
          },
          grid: {
            left: 50,
            right: 10,
            top: 30,
            bottom: 30,
            borderWidth: 1
          },
          xAxis: {
            type: 'category',
            data: [],
            axisLine: {
              lineStyle: {
                color: "#999999",
                width: 1
              }
            },
            axisLabel: {
              margin: 14,
              height: 70,
              interval: 0,
              textStyle: {
                fontSize: 10,
                color: "#999999"
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: "#999999",
                width: 1
              }
            },
            axisLabel: {
              margin: 14,
              textStyle: {
                fontSize: 10,
                color: "#999999"
              }
            }
          },
          series: [{
            name: '红码',
            //   type: 'bar',
            type: 'line',
            barGap: 0,
            data: [50, 70, 81, 69, 82, 59, 66],
            barWidth: 10,
            itemStyle: {
              color: "#e22424"
            }
          },{
            name: '绿码',
            //   type: 'bar',
            type: 'line',
            barGap: 0,
            data: [150, 198, 256, 333, 300, 358, 210],
            barWidth: 10,
            itemStyle: {
              color: "#22f10b"
            }
          },{
            name: '黄码',
            //   type: 'bar',
            type: 'line',
            barGap: 0,
            data: [99, 110, 86, 95, 79, 150, 163],
            barWidth: 10,
            itemStyle: {
              color: "#f1ea0b"
            }
          }]
        },
    }
  },
  // 导入组件
  components: {
    // 点聚合组件
  },
  // 创建完毕状态(里面是操作)
  created() {
   // this.getLast12Months();
    // console.log(this.lastMonths);
  },
  // 挂载结束状态(里面是操作)
  mounted() {
    this.getSCE()
    this.getSUM()
    this.getClick()
    this.getpay()
    this.getpayNum()

  },
  // 里面的函数只有调用才会执行
  methods: {
    getSCE() {
      getLast12Months().then(res=>{
        // console.log(res.data);
        this.chart = Chart.init(this.$refs.SCEchart)
        let sh,da;
        sh=res.data.months;
        da=res.data.tempData
        // var temp=[0, 278, 90, 145, 200, 200, 70, 60, 53, 77, 89, 79]
        for (var i=0;i<sh.length;i++){
          this.SCEoption.xAxis.data.push(sh[i]);
        }
        this.SCEoption.series[0].data=da;
        this.chart.setOption(this.SCEoption)
      });
    },
    getSUM() {
      getTwoChart().then(res=>{
        this.chart = Chart.init(this.$refs.SUMEchart);
        let sh,da;
        sh=res.data.months;
        da=res.data.tempData;
        for (var i=0;i<sh.length;i++){
          this.SUMoption.xAxis.data.push(sh[i]);
        }
        this.SUMoption.series[0].data=da;
        this.chart.setOption(this.SUMoption)
      });
    },
    getClick() {
      getThreeChart().then(res=>{
        this.chart = Chart.init(this.$refs.ClickEchart)
        let sh,da;
        sh=res.data.months;
        da=res.data.tempData;
        for (var i=0;i<sh.length;i++){
          this.Clickoption.xAxis.data.push(sh[i]);
        }
        this.Clickoption.series[0].data=da;
        this.Clickoption.series[1].data=da;
        this.chart.setOption(this.Clickoption)
      });
    },
    getpay() {
      getFourChart().then(res=>{
        this.chart = Chart.init(this.$refs.payEchart);
        console.log(res.data);
        let da;
        da=res.data;
        this.payoption.series[0].data=da;
        this.chart.setOption(this.payoption);
      });


    },
    getpayNum() {
      getFiveChart().then(res=>{
        this.chart = Chart.init(this.$refs.payNumEchart);
        let mo,da1,da2,da3;
        mo=res.data.days;
        da1=res.data.tempData1;
        da2=res.data.tempData2;
        da3=res.data.tempData3;
        for (var i=0;i<mo.length;i++){
          this.payNumoption.xAxis.data=mo;
        }
        this.payNumoption.series[0].data=da1;
        this.payNumoption.series[1].data=da3;
        this.payNumoption.series[2].data=da2;
        this.chart.setOption(this.payNumoption)
      })

    },

  }
};
</script>
<style>
.stbox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.stbgc {
  background-color: #fff;
  height: 60px;
  line-height: 60px;
  border-radius: 5px;
  padding: 0px 16px;
}
.stsearch {
  text-align: center;
}
.text-c {
  text-align: center;
}
.st-gbox {
  background-color: #fff;
  margin-top: 20px;
  border-radius: 5px;
  height: 30vh;
  box-sizing: border-box;
  padding: 10px;
}
.cavasbox {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
.paybox {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 5px;
  margin-top: 20px;
  height: 32vh;
}
</style>

